<template>
	<view class="container">
		<Header>履职</Header>
		<view class="content">
			<!-- <view class="top">
				<image src="https://zhzx.on-line-demo.com/image/lz-top.png" mode="widthFix" style="width: 100%;"></image>
				<text class="title-text">委员履职</text>
			</view> -->
			<view class="grid">
				<uni-grid :column="4" :showBorder="false" :square="false">
					<uni-grid-item>
						<view class="item-content" @click="pageTo('/pages/resumption/proposal')">
							<!-- <image src="https://zhzx.on-line-demo.com/image/icon-tagz.png" mode="heightFix"></image> -->
							<image src="/static/image/icon-tagz.png" mode="heightFix"></image>
							<view class="text">提案工作</view>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="item-content" @click="pageTo('/pages/resumption/meeting')">
							<image src="/static/image/icon-hyhd.png" mode="heightFix"></image>
							<view class="text">会议活动</view>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="item-content" @click="pageTo('/pages/consult/consult')">
							<image src="/static/image/icon-xsyz.png" mode="heightFix"></image>
							<view class="text">协商议政</view>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="item-content" @click="pageTo('/pages/inspection/index')">
							<image src="/static/image/icon-wysc.png" mode="heightFix"></image>
							<view class="text">委员视察</view>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="item-content" @click="pageTo('/pages/proposalSupervision/index')">
							<image src="/static/image/icon-tadb.png" mode="heightFix"></image>
							<view class="text">提案督办</view>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="item-content" @click="pageTo('/pages/supervise/index')">
							<image src="/static/image/icon-zdjd.png" mode="heightFix"></image>
							<view class="text">重点监督</view>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="item-content" @click="pageTo('/pages/resumption/publicOpinion')">
							<image src="/static/image/icon-sqmy.png" mode="heightFix"></image>
							<view class="text">社情民意</view>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="item-content" @click="pageTo('/pages/resumption/survey')">
							<image src="/static/image/icon-dyhd.png" mode="heightFix"></image>
							<view class="text">调研活动</view>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="item-content" @click="pageTo('/pages/theMasses/index')">
							<image src="/static/image/icon-lxqz.png" mode="heightFix"></image>
							<view class="text">联系群众</view>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="item-content" @click="pageTo('/pages/activity/index')">
							<image src="/static/image/icon-zwhd.png" mode="heightFix"></image>
							<view class="text">专委活动</view>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="item-content" @click="pageTo('/pages/book/index')">
							<image src="/static/image/sxzx.png" mode="heightFix"></image>
							<view class="text">书香政协</view>
						</view>
					</uni-grid-item>
					<!-- <uni-grid-item>
					<view class="item-content" @click="pageTo('/pages/resumption/study')">
						<image src="https://zhzx.on-line-demo.com/image/xxpx.png" mode="heightFix"></image>
						<text>学习培训</text>
					</view>
				</uni-grid-item> -->
					<uni-grid-item>
						<view class="item-content" @click="pageTo('/pages/train/index')">
							<image src="/static/image/icon-zxpx.png" mode="heightFix"></image>
							<view class="text">学习培训</view>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="item-content" @click="pageTo('/pages/my/report')">
							<image src="/static/image/icon-lzbg.png" mode="heightFix"></image>
							<view class="text">履职报告</view>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="item-content" @click="pageTo('/pages/resumption/speak')">
							<image src="/static/image/icon-dhfy.png" mode="heightFix"></image>
							<view class="text">大会发言</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
			<view class="notice">
				<view class="title-text">
					我的消息
				</view>
				<view class="types">
					<span class="btn" :class="{active: type == 1}" @click="type = 1;getListData()">未读</span>
					<span class="btn" :class="{active: type == 2}" @click="type = 2;getListData()">已读</span>
				</view>
				<uni-list>
					<uni-list-item direction="row" v-for="item in data" :key="item.message_id"
						:to="`/pages/resumption/messageDetail?id=${item.message_id}`">
						<template v-slot:body>
							<view class="uni-list-box uni-content">
								<view class="title uni-ellipsis-2">
									{{item.message_content}}
								</view>
								<view class="date">
									{{item.createtime}}
								</view>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
				<image src="https://zhzx.on-line-demo.com/image/zwsj.png" mode="aspectFit" class="no-data"
					v-if="showTip && data.length == 0" style="position: static;transform: translateY(0px);"></image>
			</view>
		</view>
		<!-- <Footer :idx="2"></Footer> -->
	</view>
</template>

<script>
	import Header from '../../components/header.vue'
	import Footer from '../../components/footer.vue'
	import request from '../../common/request.js'
	export default {
		components: {
			Header,
			Footer
		},
		data() {
			return {
				data: [],
				type: 1,
				showTip: false
			}
		},
		onLoad() {

		},
		mounted() {
			this.getListData()
		},
		methods: {
			getListData() {
				this.showTip = false
				this.data = []
				request({
					url: '/message/messageList',
					data: {
						type_num: this.type
					},
					method: 'POST',
				}).then(res => {
					this.showTip = true
					if (res.code == 1) {
						this.data = res.data
					} else {
						// uni.showToast({
						// 	title: res.msg,
						// 	icon: 'none',
						// 	duration: 2000
						// });
					}
				})
			},
			pageTo(url) {
				uni.navigateTo({
					url: url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-list-item__container {
		padding: 12px 0px;
	}

	.container {
		background-color: #f4f4f4;
		height: 100%;
		overflow-y: auto;
	}

	.content {
		padding: 0px 10px;

		.top {
			margin-top: -30px;
			margin-bottom: 10px;
			position: relative;

			.title-text {
				position: absolute;
				z-index: 2;
				left: 40px;
				top: 50%;
				transform: translateY(-50%);
				color: #fff;
				margin-top: 20px;
				font-size: 22px;
			}
		}

		.grid {
			background-color: #fff;
			margin: 15px 0px;
			border-radius: 15px;
			padding: 20px 0px;
		}

		.item-content {
			// background-color: #fff;
			// border-radius: 10px;
			margin: 15px 5px;
			text-align: center;
			font-size: 16px;

			image {
				max-width: 20px;
				height: 20px;
				margin-bottom: 2px;
				// vertical-align: middle;

			}

			.text {
				vertical-align: middle;
				font-size: 12px;
			}
		}

		.notice {
			background-color: #fff;
			margin: 15px 0px;
			border-radius: 15px;
			padding: 15px;

			.title-text {
				font-weight: bold;
				font-size: 18px;
				margin: 15px 0px;
			}

			.types {
				margin-bottom: 15px;

				.btn {
					color: #3886f3;
					background-color: #dce9fd;
					border-radius: 8px;
					margin-right: 25px;
					padding: 5px 10px;
					display: inline-block;

					&.active {
						color: #fff;
						background-color: #3886f3;
					}
				}
			}
		}
	}
</style>